<script setup lang="ts">
import type { Subject } from '@/api/subject/type';
import { router } from '@/router';
import { useUserStore } from '@/store/user';
import { onMounted, ref, Ref } from 'vue';

const subject = defineModel() as Ref<Subject>;
const userId = ref('');
onMounted(() => {
    const userStore = useUserStore();
    userId.value = userStore.getId;
})
const toManage = () => {
    if (subject.value.id != null && subject.value.id != undefined) {
        router.push({
            name: 'SubjectManage',
            query: {
                "id": subject.value.id
            }
        });
    }
}

const toForecast = () => {
    router.push({
        name: 'Forecast',
    });
}
</script>

<template>
    <div class="top">
        <div class="image">
            <van-image width="100" height="100" round
                :src="subject.avatar"
            />
        </div>
        <div class="right">
            <p>{{ subject.name }}</p>
            <p style="font-size: 13px;">创建者：{{ subject.creator.nickname }}</p>
            <div class="button">
                <van-button type="primary" @click="toForecast">分数预测</van-button>
            </div>
            <div class="button">
                <van-button type="primary" @click="toManage">管理</van-button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.top {
    margin: 3%;
    display: flex;
    background-color: white;
    border-radius: 15px;
    padding: 3%;
    .image {
        width: 50%;
        display: flex;
        align-items: center;
    }
    .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        justify-content: center;
        .button {
            margin-top: 10px;
        }
    }
}
</style>